/* 接口映射 */
<template>
  <div class="interfaceMapping">
    <div class="filter">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="对接接口：">
          <el-select v-model="interfaceId1" placeholder="请选择">
            <el-option :label="item.name" :value="item.value" v-for="item in interfaceList1" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼盘名称：">
          <el-input v-model="devName1" placeholder="请输入楼盘名称"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:-2px;margin-left:10px;">
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button type="primary" @click="onSubmit" id="monitorEnter">查询</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          fixed="left"
          align="center"
          type="index"
          label="序号"
          width="150">
        </el-table-column>
        <el-table-column label="运营后台" align="center">
          <el-table-column
          align="center"
            prop="devName"
            label="楼盘名称"
            width="300">
          </el-table-column>
          <el-table-column
          align="center"
            prop="devId"
            label="楼盘id"
            width="150">
          </el-table-column>
        </el-table-column>
        <el-table-column
          align="center"
          prop="faceType"
          label="对接接口"
          width="150">
          <template slot-scope="scope">
            {{scope.row.faceType == 0 ? '旺小宝':'云客'}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="operator"
          label="操作人"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="操作时间"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleDel(scope.row)" type="text" size="small" style="color:#ccc" class="del">删除</el-button>
            <el-button @click="handleCheck(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageData.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalSize">
        </el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="新映射关系" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="对接接口：" label-width="120px">
            <el-select v-model="interfaceId2" placeholder="请选择">
              <el-option :label="item.name" :value="item.value" v-for="item in interfaceList2" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <div style="margin-left:38px;font-size:15px;margin-bottom:10px">运营后台</div>
          <div style="padding-left:0px">
            <el-form-item label="楼盘：" label-width="120px" v-show="isEdit == 1">
              <el-select v-model="devId2" placeholder="请选择楼盘" :disabled="isEdit?false:true" filterable clearable>
                <el-option :label="item.devName" :value="item.devId" v-for="item in devList" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="楼盘：" label-width="120px" v-show="isEdit != 1">
              <el-input v-model="devName2" autocomplete="off" :disabled="isEdit?false:true"></el-input>
            </el-form-item> 
            <el-form-item label="楼盘id：" label-width="120px">
              <el-input v-model="devId2" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="ak：" label-width="120px" v-show="interfaceId2 != 1">
              <el-input v-model="ak" autocomplete="off" :disabled="isEdit?false:true"></el-input>
            </el-form-item>
            <el-form-item label="sk：" label-width="120px" v-show="interfaceId2 != 1">
              <el-input v-model="sk" autocomplete="off" :disabled="isEdit?false:true"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancle">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import api from "@/api/apiPath"
import util from '@/common/utils'
export default {
  name:"interfaceMapping",
  title:"外部接口映射",
  components: {},
  data() {
    return {
      totalSize:0,
      pageData:{
        pageSize:10,
        pageNum:1
      },
      interfaceId1:'',
      interfaceId2:'',
      interfaceList1:[
        {name:'云客',value:1},
        {name:'旺小宝',value:0}
      ],
      interfaceList2:[
        {name:'云客',value:1},
        {name:'旺小宝',value:0}
      ],
      devList:[],
      devName1:'',
      devName2:'',
      devId1:'',
      devId2:'',
      ak:'',
      sk:'',
      tableData: [],
      dialogFormVisible:false,
      isEdit:0,
      row:{}
    }
  },
  created() {
    this.onSubmit()
    this.getDevList()
  },
  activated(){
    this.onSubmit()
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      console.log(val)
      this.pageData.pageSize = val
      this.onSubmit()
    },
    handleCurrentChange(val) {
      this.onSubmit()
    },
    // 查询楼盘
    getDevList(){
      this.axios.post(api.queryAllDevList,{
        // estateProjectId:1301
      }).then(res=>{
        console.log(res)
        this.devList = res.data.data
      })
    },
    // 列表
    onSubmit(){
      this.axios.post(api.interfaceMapping,{
        pageNum:this.pageData.pageNum,
        pageSize:this.pageData.pageSize,
        faceType:this.interfaceId1,
        devName:this.devName1
      }).then((res)=>{
        console.log(res)
        if(res.data.code == 200){
          this.totalSize = res.data.data.total
          this.tableData = res.data.data.list
          this.tableData.forEach((item)=>{
            item.createTime = util.getTimeString(item.createTime)
          })
        }
      })
    },
    // 新增
    handleAdd(){
      this.isEdit = 1
      this.dialogFormVisible = true
      // this.handleCancle()
      this.interfaceId2 = '',
      this.devId2 = ''
      this.ak = ''
      this.sk = ''
    },
    // 重置
    handleReset(){
      this.interfaceId1 = ''
      this.devName1 = ''
    },
    // 确定
    handleConfirm(){
      let params = {}
      // 新增
      if(this.isEdit == 1){
        let idx = this.devList.findIndex(item=>item.devId == this.devId2)
        console.log(this.devList[idx].devName)
        params.devId = this.devId2
        params.devName = this.devList[idx].devName
        params.faceType = this.interfaceId2
        if(this.interfaceId2 == 0){
          params.ak = this.ak
          params.sk = this.sk
        }
        this.axios.post(api.interfaceMappingAdd,params).then(res=>{
          console.log('新增')
          this.onSubmit()
        })
      }else{
        params.id = this.row.id
        params.devId = this.row.devId
        params.devName = this.row.devName
        params.faceType = this.interfaceId2
        if(this.interfaceId2 == 0){
          params.ak = this.row.ak
          params.sk = this.row.sk
        }
        this.axios.post(api.interfaceMappingEdit,params).then(res=>{
          console.log('编辑')
          console.log(res)
          this.onSubmit()
        })
      }
      // this.interfaceId2 = '',
      // this.devId2 = ''
      // this.ak = ''
      // this.sk = ''
      this.dialogFormVisible = false
    },
    // 取消
    handleCancle(){
      this.dialogFormVisible = false
      // this.interfaceId2 = '',
      // this.devId2 = ''
      // this.ak = ''
      // this.sk = ''
    },
    // 编辑
    handleEdit(index,row){
      this.row = row
      console.log(row)
      this.isEdit = 0
      this.dialogFormVisible = true
      this.interfaceId2 = row.faceType
      this.devId2 =  row.devId
      this.devName2 = row.devName
      this.ak = row.ak
      this.sk = row.sk
    },
    // 删除
    handleDel(row){
      console.log(row.id)
      this.axios.post(api.interfaceMappingDel,{
        id:row.id
      }).then(res=>{
        console.log(res)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.onSubmit()
      })
    },
    // 查看
    handleCheck(row) {
      console.log(row)
      this.$router.push({path:'/synchronizationJournal',query:{
        id:row.devId
      }})
    }
  },
  computed: {}
}
</script>
<style lang="stylus" scoped>
  .interfaceMapping {
    .el-input{
      width :220px;
    }
    .del:hover{
      color :#409EFF!important;
    }
    .block{
      margin-top :20px;
    }
  }
</style>